<template>
  <div class="x-robot" v-loading="loading">
    <div class="wrap_top title">
      <img :src="$i18n.locale=='en'? '/img/xrobot/AI_en.png':'/img/xrobot/AI.png'" v-if="$store.state.oemObj.oemFlag" alt="">
      <img src="/img/xrobot/xbott.png" alt="" v-if="!$store.state.oemObj.oemFlag">
      <p>{{$t('xrobot.serverSimple')}}</p>
      <span @click="applyPro">{{btnText}}</span>
    </div>
    <div class="wrap_fun">
      <div class="fun_item" v-for="item in funArray" :key="item.hText">
        <img :src="item.img" alt="">
        <h4>{{item.hText}}</h4>
        <p>{{item.pText}}</p>
      </div>
    </div>
    <h3 class="tit_demo">{{$t('xrobot.demoExperience')}}</h3>
    <div class="wrap_demo">
      <div class="demo_item" @click="showDemo(item)" v-for="item in demoArray" :key="item.text">
        <img :src="item.img" alt="">
        <p>{{item.text}}</p>
      </div>
    </div>
    <!-- demo点击弹窗 -->
    <el-dialog :show-close="false" custom-class="dia_demo" :visible.sync="dialogDemoVisible" v-if="dialogDemoVisible">
      <div class="wrap_close" @click="dialogDemoVisible=false">
        <span class="icon iconfont icon-qiapianshangdeguanbi"></span>
      </div>
      <div class="wrap_top dialog">
        <img :src="diaObj.imgT" alt="">
      </div>
      <div class="wrap_con">
        <img :src="diaObj.imgC" alt="">
      </div>
      <div class="wrap_btn" style="text-align:center;margin-bottom: 24px;" v-if="!$store.state.oemObj.oemFlag">
        <el-button type="primary" class="btn" @click="linkjump(diaObj.link)">{{$t('xrobot.goExperience')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog custom-class="dia_apply" :title="diaApplyTitle" :visible.sync="dialogApplyVisible">
      <div class="wrap_press" v-show="questStatus === 'begin'">
        <p>{{$t('xrobot.creatingRobot')}}</p>
        <el-progress :percentage="percentage"></el-progress>
      </div>
      <div class="wrap_suc" v-show="questStatus === 'success'">
        <p>{{$t('xrobot.openedXbot')}}</p>
        <p class="strong">{{$t('xrobot.periodTen')}}</p>
        <span class="btn" @click="openXBot">{{$t('xrobot.haveTry')}}</span>
      </div>
      <div class="wrap_fail" v-show="questStatus === 'fail'">
        <p>{{$t('xrobot.creatFailContact')}}</p>
        <span @click="closeDiaApply" class="btn">{{$t('public.colse')}}</span>
      </div>
    </el-dialog>
    <form  name="xbotSubmit" :action="xbotUrl" method="post" style="display:none;" target="_blank">
      <input type="text" v-for="(val, key, index) in page" :name="key" :value="val" :key="index"><br>
      <input type="submit" value="提交" id="xbotSubmit">
    </form>
  </div>
</template>

<script>
  // import img1 from '../../../../public/img/xrobot/fun_1.png'
  import img1 from '../../../../public/img/xrobot/fun_1.png'
  import img2 from '../../../../public/img/xrobot/fun_2.png'
  import img3 from '../../../../public/img/xrobot/fun_3.png'
  import img4 from '../../../../public/img/xrobot/fun_4.png'
  import img5 from '../../../../public/img/xrobot/fun_5.png'
  import img6 from '../../../../public/img/xrobot/fun_6.png'
  import gongd from '../../../../public/img/xrobot/gongd.png'
  import dians from '../../../../public/img/xrobot/dians.png'
  import jiaoy from '../../../../public/img/xrobot/jiaoy.png'
  import yil from '../../../../public/img/xrobot/yil.png'
  import jinr from '../../../../public/img/xrobot/jinr.png'
  import luy from '../../../../public/img/xrobot/luy.png'
  import O2O from '../../../../public/img/xrobot/O2O.png'
  import xiaozs from '../../../../public/img/xrobot/xiaozs.png'
  let timor = null
  export default {
    data() {
      return {
        loading: false,
        page: '', // 跳转配置
        diaApplyTitle: this.$t('xrobot.creating'), // 申请表头
        questStatus: 'begin', // 请求状态
        interval: false, // 定时器是否结束
        isSuccess: false, // 请求是否成功
        isQuest: false, // 请求是否完成
        percentage: 0,
        btnText: this.$t('xrobot.freeTrial'),
        isHaveRobot: false,
        xbotUrl: '',
        diaObj: {
          imgT: '',
          imgC: '',
          link: ''
        },
        demoArray: [
          {
            text: this.$t('xrobot.businessRobot'),
            img: gongd,
            newurl:'workOrder',
            link: 'https://ykf-webchat.7moor.com/pcwebchat.html?accessId=4c00fe80-2b90-11ea-80f7-c3d0377b7031&urlTitle=im&fromUrl=https%3A%2F%2Fykf-webchat.7moor.com%2F%3F4c00fe80-2b90-11ea-80f7-c3d0377b7031&language=zh-CN&otherParams=%7B%22cardInfo%22%3A%7B%22left%22%3A%7B%22url%22%3A%22%22%7D%2C%22right1%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right2%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right3%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22extraInfos%22%3A%5B%5D%2C%22url%22%3A%22%22%7D%2C%22m7ProductInfo%22%3A%7B%22visible%22%3Afalse%2C%22actionText%22%3A%22%22%2C%22actionTextColor%22%3A%22%22%2C%22title%22%3A%22%22%2C%22sub_title%22%3A%22%22%2C%22other_title_one%22%3A%22%22%2C%22other_title_two%22%3A%22%22%2C%22other_title_three%22%3A%22%22%2C%22img%22%3A%22%22%2C%22price%22%3A%22%22%2C%22attr_one%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22attr_two%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22target%22%3A%22%22%2C%22time%22%3A%22%22%2C%22tags%22%3A%5B%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%2C%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%5D%2C%22showCardInfoMsg%22%3A1%7D%7D&clientId=&unionAccessId=undefined&customField=&priority=false'
          },
          {
            text: this.$t('xrobot.industryRobot'),
            img: dians,
            newurl:'ecommerce',
            link: 'https://ykf-webchat.7moor.com/pcwebchat.html?accessId=e49c3790-22cb-11ea-a902-2130ccedace9&urlTitle=im&fromUrl=https%3A%2F%2Fykf-webchat.7moor.com%2F%3Fe49c3790-22cb-11ea-a902-2130ccedace9&language=zh-CN&otherParams=%7B%22cardInfo%22%3A%7B%22left%22%3A%7B%22url%22%3A%22%22%7D%2C%22right1%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right2%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right3%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22extraInfos%22%3A%5B%5D%2C%22url%22%3A%22%22%7D%2C%22m7ProductInfo%22%3A%7B%22visible%22%3Afalse%2C%22actionText%22%3A%22%22%2C%22actionTextColor%22%3A%22%22%2C%22title%22%3A%22%22%2C%22sub_title%22%3A%22%22%2C%22other_title_one%22%3A%22%22%2C%22other_title_two%22%3A%22%22%2C%22other_title_three%22%3A%22%22%2C%22img%22%3A%22%22%2C%22price%22%3A%22%22%2C%22attr_one%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22attr_two%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22target%22%3A%22%22%2C%22time%22%3A%22%22%2C%22tags%22%3A%5B%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%2C%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%5D%2C%22showCardInfoMsg%22%3A1%7D%7D&clientId=&unionAccessId=undefined&customField=&priority=false'
          },
          {
            text: this.$t('xrobot.teachRobot'),
            img: jiaoy,
            newurl:'education',
            link: 'https://ykf-webchat.7moor.com/pcwebchat.html?accessId=def08bc0-26f9-11ea-aad7-d3d03173c167&urlTitle=im&fromUrl=https%3A%2F%2Fykf-webchat.7moor.com%2F%3Fdef08bc0-26f9-11ea-aad7-d3d03173c167&language=zh-CN&otherParams=%7B%22cardInfo%22%3A%7B%22left%22%3A%7B%22url%22%3A%22%22%7D%2C%22right1%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right2%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right3%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22extraInfos%22%3A%5B%5D%2C%22url%22%3A%22%22%7D%2C%22m7ProductInfo%22%3A%7B%22visible%22%3Afalse%2C%22actionText%22%3A%22%22%2C%22actionTextColor%22%3A%22%22%2C%22title%22%3A%22%22%2C%22sub_title%22%3A%22%22%2C%22other_title_one%22%3A%22%22%2C%22other_title_two%22%3A%22%22%2C%22other_title_three%22%3A%22%22%2C%22img%22%3A%22%22%2C%22price%22%3A%22%22%2C%22attr_one%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22attr_two%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22target%22%3A%22%22%2C%22time%22%3A%22%22%2C%22tags%22%3A%5B%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%2C%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%5D%2C%22showCardInfoMsg%22%3A1%7D%7D&clientId=&unionAccessId=undefined&customField=&priority=false'
          },
          {
            text: this.$t('xrobot.medicalRobot'),
            img: yil,
            newurl:'medical',
            link: 'https://ykf-webchat.7moor.com/pcwebchat.html?accessId=20fa9230-52fc-11ea-b3e3-83de95261786&urlTitle=im&fromUrl=https%3A%2F%2Fykf-webchat.7moor.com%2F%3F20fa9230-52fc-11ea-b3e3-83de95261786&language=zh-CN&otherParams=%7B%22cardInfo%22%3A%7B%22left%22%3A%7B%22url%22%3A%22%22%7D%2C%22right1%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right2%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right3%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22extraInfos%22%3A%5B%5D%2C%22url%22%3A%22%22%7D%2C%22m7ProductInfo%22%3A%7B%22visible%22%3Afalse%2C%22actionText%22%3A%22%22%2C%22actionTextColor%22%3A%22%22%2C%22title%22%3A%22%22%2C%22sub_title%22%3A%22%22%2C%22other_title_one%22%3A%22%22%2C%22other_title_two%22%3A%22%22%2C%22other_title_three%22%3A%22%22%2C%22img%22%3A%22%22%2C%22price%22%3A%22%22%2C%22attr_one%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22attr_two%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22target%22%3A%22%22%2C%22time%22%3A%22%22%2C%22tags%22%3A%5B%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%2C%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%5D%2C%22showCardInfoMsg%22%3A1%7D%7D&clientId=&unionAccessId=undefined&customField=&priority=false'
          },
          {
            text: this.$t('xrobot.fananceRobot'),
            img: jinr,
            newurl:'finance',
            link: 'https://ykf-webchat.7moor.com/pcwebchat.html?accessId=d51d0c40-38dd-11ea-a401-a12208198be9&urlTitle=im&fromUrl=https%3A%2F%2Fykf-webchat.7moor.com%2F%3Fd51d0c40-38dd-11ea-a401-a12208198be9&language=zh-CN&otherParams=%7B%22cardInfo%22%3A%7B%22left%22%3A%7B%22url%22%3A%22%22%7D%2C%22right1%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right2%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right3%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22extraInfos%22%3A%5B%5D%2C%22url%22%3A%22%22%7D%2C%22m7ProductInfo%22%3A%7B%22visible%22%3Afalse%2C%22actionText%22%3A%22%22%2C%22actionTextColor%22%3A%22%22%2C%22title%22%3A%22%22%2C%22sub_title%22%3A%22%22%2C%22other_title_one%22%3A%22%22%2C%22other_title_two%22%3A%22%22%2C%22other_title_three%22%3A%22%22%2C%22img%22%3A%22%22%2C%22price%22%3A%22%22%2C%22attr_one%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22attr_two%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22target%22%3A%22%22%2C%22time%22%3A%22%22%2C%22tags%22%3A%5B%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%2C%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%5D%2C%22showCardInfoMsg%22%3A1%7D%7D&clientId=&unionAccessId=undefined&customField=&priority=false'
          },
          {
            text: this.$t('xrobot.tourRobot'),
            img: luy,
            newurl:'travel',
            link: 'https://ykf-webchat.7moor.com/pcwebchat.html?accessId=ec17c7f0-261d-11ea-869a-330f7887581d&urlTitle=im&fromUrl=https%3A%2F%2Fykf-webchat.7moor.com%2F%3Fec17c7f0-261d-11ea-869a-330f7887581d&language=zh-CN&otherParams=%7B%22cardInfo%22%3A%7B%22left%22%3A%7B%22url%22%3A%22%22%7D%2C%22right1%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right2%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right3%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22extraInfos%22%3A%5B%5D%2C%22url%22%3A%22%22%7D%2C%22m7ProductInfo%22%3A%7B%22visible%22%3Afalse%2C%22actionText%22%3A%22%22%2C%22actionTextColor%22%3A%22%22%2C%22title%22%3A%22%22%2C%22sub_title%22%3A%22%22%2C%22other_title_one%22%3A%22%22%2C%22other_title_two%22%3A%22%22%2C%22other_title_three%22%3A%22%22%2C%22img%22%3A%22%22%2C%22price%22%3A%22%22%2C%22attr_one%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22attr_two%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22target%22%3A%22%22%2C%22time%22%3A%22%22%2C%22tags%22%3A%5B%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%2C%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%5D%2C%22showCardInfoMsg%22%3A1%7D%7D&clientId=&unionAccessId=undefined&customField=&priority=false'
          },
          {
            text: this.$t('xrobot.O2ORobot'),
            img: O2O,
            newurl:'O2O',
            link: 'https://ykf-webchat.7moor.com/pcwebchat.html?accessId=3316d190-30ec-11ea-afc1-db3e030f2031&urlTitle=im&fromUrl=https%3A%2F%2Fykf-webchat.7moor.com%2F%3F3316d190-30ec-11ea-afc1-db3e030f2031&language=zh-CN&otherParams=%7B%22cardInfo%22%3A%7B%22left%22%3A%7B%22url%22%3A%22%22%7D%2C%22right1%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right2%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right3%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22extraInfos%22%3A%5B%5D%2C%22url%22%3A%22%22%7D%2C%22m7ProductInfo%22%3A%7B%22visible%22%3Afalse%2C%22actionText%22%3A%22%22%2C%22actionTextColor%22%3A%22%22%2C%22title%22%3A%22%22%2C%22sub_title%22%3A%22%22%2C%22other_title_one%22%3A%22%22%2C%22other_title_two%22%3A%22%22%2C%22other_title_three%22%3A%22%22%2C%22img%22%3A%22%22%2C%22price%22%3A%22%22%2C%22attr_one%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22attr_two%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22target%22%3A%22%22%2C%22time%22%3A%22%22%2C%22tags%22%3A%5B%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%2C%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%5D%2C%22showCardInfoMsg%22%3A1%7D%7D&clientId=&unionAccessId=undefined&customField=&priority=false'
          },
          {
            text: this.$t('xrobot.enterpriseAide'),
            img: xiaozs,
            newurl:'workHelp',
            link: 'https://ykf-webchat.7moor.com/pcwebchat.html?accessId=e57bacb0-5771-11ea-9050-8da0e5811f82&urlTitle=im&fromUrl=https%3A%2F%2Fykf-webchat.7moor.com%2F%3Fe57bacb0-5771-11ea-9050-8da0e5811f82&language=zh-CN&otherParams=%7B%22cardInfo%22%3A%7B%22left%22%3A%7B%22url%22%3A%22%22%7D%2C%22right1%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right2%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22right3%22%3A%7B%22text%22%3A%22%22%2C%22color%22%3A%22%22%2C%22fontSize%22%3A%22%22%7D%2C%22extraInfos%22%3A%5B%5D%2C%22url%22%3A%22%22%7D%2C%22m7ProductInfo%22%3A%7B%22visible%22%3Afalse%2C%22actionText%22%3A%22%22%2C%22actionTextColor%22%3A%22%22%2C%22title%22%3A%22%22%2C%22sub_title%22%3A%22%22%2C%22other_title_one%22%3A%22%22%2C%22other_title_two%22%3A%22%22%2C%22other_title_three%22%3A%22%22%2C%22img%22%3A%22%22%2C%22price%22%3A%22%22%2C%22attr_one%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22attr_two%22%3A%7B%22color%22%3A%22%22%2C%22content%22%3A%22%22%7D%2C%22target%22%3A%22%22%2C%22time%22%3A%22%22%2C%22tags%22%3A%5B%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%2C%7B%22label%22%3A%22%22%2C%22url%22%3A%22%22%2C%22focusIframe%22%3A%22%22%7D%5D%2C%22showCardInfoMsg%22%3A1%7D%7D&clientId=&unionAccessId=undefined&customField=&priority=false'
          }
        ],
        funArray: [
          {
            img: img5,
            hText: this.$t('xrobot.intelligentQA'),
            pText: this.$t('xrobot.deepStudy')
          },
          {
            img: img6,
            hText: this.$t('xrobot.intellSall'),
            pText: this.$t('xrobot.richUser')
          },
          {
            img: img2,
            hText: this.$t('xrobot.multipleRounds'),
            pText: this.$t('xrobot.portableDrag')
          },
          {
            img: img4,
            hText: this.$t('xrobot.machineAssist'),
            pText: this.$t('xrobot.manualSeat')
          },
          {
            img: img1,
            hText: this.$t('xrobot.multiScene'),
            pText: this.$t('xrobot.intellBusiness')
          },
          {
            img: img3,
            hText: this.$t('xrobot.channelAccess'),
            pText: this.$t('xrobot.multiPlatform')
          }
        ],
        dialogDemoVisible: false,
        dialogApplyVisible: false
      }
    },
    methods: {
      showDemo (item) {
        this.diaObj.imgT = `/img/xrobot/${item.newurl}T_${this.$i18n.locale}.png`
        this.diaObj.imgC = `/img/xrobot/${item.newurl}C_${this.$i18n.locale}.png`
        this.diaObj.link = item.link
        this.dialogDemoVisible = true
      },
      // 关闭提示框
      closeDiaApply () {
        this.dialogApplyVisible = false
      },
      // 请求获取配置
      openXBot () {
        this.$store.dispatch('getRobotUrl', {}).then(res => {
          console.log(res, 6666);
          this.page = res.dict
          var lang = window.localStorage.lang || 'zh_CN'
          this.$set(this.page, 'lang', lang)
          this.xbotUrl = res.dict.xbotUrl
          this.$nextTick(() => {
            document.xbotSubmit.submit()
          })
        })
      },
      // 获取机器人demo地址
      getDemoAddress () {
        this.$store.dispatch('getRobotDemoUrls', {}).then(res => {
          for (let i = 0; i < this.demoArray.length; i++) {
            let element = this.demoArray[i];
            element.link = res.robotDemoUrls[element.newurl]
          }
        })
      },
      // 获取机器人配置
      getRobotConfig () {
        let user = this.$store.state.session.user
        const data = {
          account: user ? user.account : ''
        }
        this.loading = true
        this.$store.dispatch('queryRobotEnter', data).then(res => {
          if (res.message.includes('haveRobot')) {
            this.btnText = this.$t('xrobot.enterRobot')
            this.isHaveRobot = true
          } else {
            this.btnText = this.$t('xrobot.freeTrial')
            this.isHaveRobot = false
          }
          this.loading = false
        })
      },
      initVal () {
        this.interval = false
        this.isSuccess = false
        this.isQuest = false
        this.percentage = 0
        this.questStatus = 'begin'
        this.diaApplyTitle = this.$t('xrobot.creating')
      },
      // 点击按钮判断是否有机器人
      applyPro () {
        if (this.isHaveRobot) {
          window._hmt && window._hmt.push(['_trackEvent', '机器人', 'PM-登陆机器人后台'])
          this.openXBot()
          return
        }
        window._hmt && window._hmt.push(['_trackEvent', '机器人', 'PM-申请免费试用'])
        this.dialogApplyVisible = true
        this.initVal() // 初始化状态
        clearInterval(timor)
        let self = this
        timor = setInterval(function () {
          self.percentage++
          if (self.percentage >= 100) {
            clearInterval(timor)
            self.interval = true
            if (self.isQuest) {
              self.questStatus = self.isSuccess ? 'success' : 'fail'
              self.diaApplyTitle = self.isSuccess ? self.$t('xrobot.creatSuccess') : self.$t('xrobot.creatFail')
              if (self.isSuccess) {
                self.btnText = self.$t('xrobot.enterRobot')
              }
            }
          }
        }, 30)
        this.$store.dispatch('initRobotFree', {}).then((res) => {
          this.isQuest = true
          if (res.init) {
            this.isSuccess = true
            this.isHaveRobot = true
            if (this.interval) {
              this.questStatus = 'success'
              this.diaApplyTitle = this.$t('xrobot.creatSuccess')
              this.btnText = self.$t('xrobot.enterRobot')
            }
          } else {
            this.isSuccess = false
            if (this.interval) {
              this.diaApplyTitle = this.$t('xrobot.creatFail')
              this.questStatus = 'fail'
            }
          }
        })
      },
      linkjump(url){
        window.open(url)
      }
    },
    beforeMount () {
      this.getRobotConfig()
      this.getDemoAddress()
    },
  }
</script>

<style lang="stylus" scoped>
@import "../../../assets/common.styl"
/deep/.dia_demo.el-dialog
  // margin-top 5vh!important
  border-radius: 8px;
  width 480px
  overflow auto
  .el-dialog__header
    padding 0
  .el-icon-close
    color rgba(255,255,255,0.5)
    i
      font-size 31px
  .el-icon-close:hover
    color rgba(255,255,255,1)
  .el-dialog__body
    padding 0
  .wrap_close
    position absolute
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    font-size: 23px;
    cursor: pointer;
    top 20px
    right 20px
    display flex
    justify-content center
    align-items center
    span
      color rgba(255,255,255,0.5)
  .wrap_close:hover
    span 
      color rgba(255,255,255,0.8)
/deep/.dia_apply
  .el-dialog__body
    padding-top 40px
    .wrap_suc,
    .wrap_fail
      display flex
      text-align center
      align-items center
      flex-direction column
      padding-bottom 20px
      p.strong
        color $c-pink
        margin 20px 0 30px
      .btn
        display inline-block
        padding 0 32px
        font-size 14px
        height 40px
        line-height 40px
        background #2A6AED
        color #fff
        border-radius 4px
        cursor pointer
    .wrap_fail
      .btn
        margin-top 30px

.x-robot
    padding 50px 80px 70px
    height: calc(100vh - 173px);
    overflow-y: auto;
    .tit_demo
      font-size 16px
      font-weight 600
      color rgba(0,0,0,1)
    .wrap_con
      text-align center
      height 18vw
      overflow-y scroll
      overflow-x hidden
      margin-bottom 20px
      width 480px
      img
        width 480px
     
    .wrap_btn
      .btn
        width calc(100% - 48px)
        background:rgba(0,129,255,1);
        border-radius:8px;
        font-size 16px
        height 40px
    .wrap_top.dialog
      margin-bottom: 20px;
    .wrap_top
      display flex
      align-items center
      flex-direction column
      img
        width 480px
      p
        font-size 16px
        color rgba(22,22,22,1)
        line-height 16px
        margin  20px 0 40px
      span
        display inline-block
        padding 0 32px
        font-size 14px
        height 40px
        line-height 40px
        background #2A6AED
        color #fff
        border-radius 4px
        cursor pointer
    .wrap_top.title
      img
        width unset
    .wrap_demo
      display flex
      justify-content space-between
      flex-wrap wrap
      .demo_item:hover
        transform scale(1.1)
        cursor pointer
        p
          color #2A6AED
      .demo_item
        border-radius 8px
        transtion all 0.4s
        background #fff
        margin 20px
        p
          height 50px
          line-height 50px
          border-radius 0 0 8px 8px
          font-size 16px
          font-weight 600
          color rgba(0,0,0,1)
          text-align center
    .wrap_fun
      display flex
      justify-content space-between
      flex-wrap wrap
      margin 0px 0 48px
      .fun_item
        text-align center
        margin-top 40px
        h4
          font-size 14px
          font-weight 400
          color rgba(0,0,0,1)
          line-height 26px
          margin 20px 0 14px
        p
          font-size 12px
          color rgba(59,59,59,1)
          line-height 18px
        img
          height 96px
          width 96px
@media screen and (min-width:3001px)
  .x-robot
    .wrap_demo
      justify-content unset
@media screen and (min-width:2400px) and (max-width: 3000px)
  .x-robot
    .wrap_demo
      justify-content unset
  .demo_item
    width calc(20% - 40px)
    img
      width 100%
@media screen and (max-width: 2399px)
  .demo_item
    width calc(25% - 40px)
    img 
      width 100%
  .demo_item:last-child:nth-child(4n - 1) 
    margin-right calc((25% - 40px) + 160px / 3)
  /* 如果最后一行是2个元素 */
  .demo_item:last-child:nth-child(4n - 2) 
    margin-right calc((50% - 80px) + 320px / 3)
@media screen and (max-width: 1440px)
  .demo_item
    width calc(33% - 40px)
  .wrap_demo::after
    content: ""; 
    width: calc(33%)
  .fun_item
    width calc(16% - 20px)
    img
      width unset
@media screen and (max-width: 1200px)
  .demo_item
    width calc(50% - 40px)
  .fun_item
    width calc(33% - 20px)
    img
      width 150px
</style>